<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Css层叠样式表期末复习 | YoiaL</title><meta name="keywords" content="学习笔记,菜鸟入门,HTML+CSS"><meta name="author" content="John Doe"><meta name="copyright" content="John Doe"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="给你的网页加点颜色： 什么是CSS？  多个选择器组成的集合 每个选择器由3个基本部分组成（选择器名、属性、值）  认识选择器 :   id选择器:  id名 id选择器只能使用一次，不能结合使用，JavaScript中常用。    class选择器   元素选择器    id选择器  &gt;  class选择器  &gt;  元素选择器  认识样式表 ：   内联样式表（行内样式）  直接在标">
<meta property="og:type" content="article">
<meta property="og:title" content="Css层叠样式表期末复习">
<meta property="og:url" content="https://liaoyia.gitee.io/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/index.html">
<meta property="og:site_name" content="YoiaL">
<meta property="og:description" content="给你的网页加点颜色： 什么是CSS？  多个选择器组成的集合 每个选择器由3个基本部分组成（选择器名、属性、值）  认识选择器 :   id选择器:  id名 id选择器只能使用一次，不能结合使用，JavaScript中常用。    class选择器   元素选择器    id选择器  &gt;  class选择器  &gt;  元素选择器  认识样式表 ：   内联样式表（行内样式）  直接在标">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png">
<meta property="article:published_time" content="2020-06-22T11:08:56.000Z">
<meta property="article:modified_time" content="2021-03-15T10:30:02.015Z">
<meta property="article:author" content="John Doe">
<meta property="article:tag" content="学习笔记">
<meta property="article:tag" content="菜鸟入门">
<meta property="article:tag" content="HTML+CSS">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png"><link rel="shortcut icon" href="/liaoyia/img/favicon.png"><link rel="canonical" href="https://liaoyia.gitee.io/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/liaoyia/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/liaoyia/',
  algolia: undefined,
  localSearch: {"path":"search.xml","languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: {"defaultEncoding":1,"translateDelay":0,"msgToTraditionalChinese":"繁","msgToSimplifiedChinese":"簡"},
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: true,
    post: true
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: {"chs_to_cht":"你已切换为繁体","cht_to_chs":"你已切换为简体","day_to_night":"你已切换为深色模式","night_to_day":"你已切换为浅色模式","bgLight":"#49b1f5","bgDark":"#121212","position":"bottom-center"},
  source: {
    jQuery: 'https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js',
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/js/jquery.justifiedGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/justifiedGallery/dist/css/justifiedGallery.min.css'
    },
    fancybox: {
      js: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.js',
      css: 'https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@latest/dist/jquery.fancybox.min.css'
    }
  },
  isPhotoFigcaption: true,
  islazyload: false,
  isanchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = { 
  isPost: true,
  isHome: false,
  isHighlightShrink: false,
  isToc: true,
  postUpdate: '2021-03-15 18:30:02'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    })(window)</script><link rel="stylesheet" href="/css/fishes.css"><style type="text/css">#toggle-sidebar { left : 100px }</style><meta name="generator" content="Hexo 5.4.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="author-avatar"><img class="avatar-img" src="/liaoyia/null" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data"><div class="data-item is-center"><div class="data-item-link"><a href="/liaoyia/archives/"><div class="headline">文章</div><div class="length-num">16</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/liaoyia/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div></div><div class="data-item is-center"><div class="data-item-link"><a href="/liaoyia/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/liaoyia/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page" href="/liaoyia/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page" href="/liaoyia/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/liaoyia/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page" href="/liaoyia/books/"><i class="fa-fw fa fa-book"></i><span> 书籍</span></a></li><li><a class="site-page" href="/liaoyia/games/"><i class="fa-fw fa fa-gamepad"></i><span> 游戏</span></a></li><li><a class="site-page" href="/liaoyia/ziyu/"><i class="fa-fw fa-fw fas fa-cubes"></i><span> 自言自语</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw laptop-code"></i><span> 🎯</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/messages/"><i class="fa-fw fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></li><li><a class="site-page" href="/liaoyia/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></li><li><a class="site-page" href="/liaoyia/about/"><i class="fa-fw fa-fw fas fa-heart"></i><span> 关于我</span></a></li></ul></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/liaoyia/">YoiaL</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/liaoyia/"><i class="fa-fw fas fa-home"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fas fa-compass"></i><span> 目录</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/archives/"><i class="fa-fw fas fa-archive"></i><span> 归档</span></a></li><li><a class="site-page" href="/liaoyia/tags/"><i class="fa-fw fas fa-tags"></i><span> 标签</span></a></li><li><a class="site-page" href="/liaoyia/categories/"><i class="fa-fw fas fa-folder-open"></i><span> 分类</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw fa-fw fa fa-heartbeat"></i><span> 娱乐</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/music/"><i class="fa-fw fas fa-music"></i><span> 音乐</span></a></li><li><a class="site-page" href="/liaoyia/movies/"><i class="fa-fw fas fa-video"></i><span> 电影</span></a></li><li><a class="site-page" href="/liaoyia/books/"><i class="fa-fw fa fa-book"></i><span> 书籍</span></a></li><li><a class="site-page" href="/liaoyia/games/"><i class="fa-fw fa fa-gamepad"></i><span> 游戏</span></a></li><li><a class="site-page" href="/liaoyia/ziyu/"><i class="fa-fw fa-fw fas fa-cubes"></i><span> 自言自语</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="javascript:void(0);"><i class="fa-fw laptop-code"></i><span> 🎯</span><i class="fas fa-chevron-down expand"></i></a><ul class="menus_item_child"><li><a class="site-page" href="/liaoyia/messages/"><i class="fa-fw fa-fw fas fa-comment-dots"></i><span> 留言板</span></a></li><li><a class="site-page" href="/liaoyia/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></li><li><a class="site-page" href="/liaoyia/about/"><i class="fa-fw fa-fw fas fa-heart"></i><span> 关于我</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">Css层叠样式表期末复习</h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">发表于</span><time class="post-meta-date-created" datetime="2020-06-22T11:08:56.000Z" title="发表于 2020-06-22 19:08:56">2020-06-22</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">更新于</span><time class="post-meta-date-updated" datetime="2021-03-15T10:30:02.015Z" title="更新于 2021-03-15 18:30:02">2021-03-15</time></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">字数总计:</span><span class="word-count">3k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">阅读时长:</span><span>11分钟</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">阅读量:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/hint.css/2.4.1/hint.min.css"><h1>给你的网页加点颜色：</h1>
<h2 id="什么是CSS？">什么是CSS？</h2>
<blockquote>
<p>多个选择器组成的集合</p>
<p>每个选择器由3个基本部分组成（选择器名、属性、值）</p>
</blockquote>
<h2 id="认识选择器">认识选择器 :</h2>
<ol>
<li>
<p><strong>id选择器:</strong></p>
<blockquote>
<p>id名</p>
<p>id选择器只能使用一次，不能结合使用，JavaScript中常用。</p>
</blockquote>
</li>
<li>
<p><strong>class选择器</strong></p>
</li>
<li>
<p><strong>元素选择器</strong></p>
</li>
</ol>
<blockquote>
<p>id选择器  &gt;  class选择器  &gt;  元素选择器</p>
</blockquote>
<h2 id="认识样式表-：">认识样式表 ：</h2>
<ol>
<li>
<p><strong>内联样式表（行内样式）</strong></p>
<blockquote>
<p><strong>直接在标签中style属性写css</strong></p>
</blockquote>
</li>
<li>
<p><strong>内部样式表（嵌入样式）</strong></p>
<blockquote>
<p><strong>在head的style标签中写css</strong></p>
</blockquote>
</li>
<li>
<p><strong>外部样式表（链接样式）</strong></p>
<blockquote>
<p><strong>在HTML文件外写css，通过link标签引入样式</strong></p>
<p><strong>减少HTML文本长度，单独在一个css文本中专心写样式、增加开发效率。</strong></p>
</blockquote>
</li>
</ol>
<blockquote>
<p>内联样式表  &gt;  内部样式表 &gt; 外部样式表</p>
<p>行内样式 &gt; 嵌入样式 &gt; 链接样式</p>
</blockquote>
<h2 id="div-css-布局">div + css 布局 :</h2>
<h3 id="页面常用标签">页面常用标签</h3>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span>&gt;</span> <span class="tag">&lt;/<span class="name">div</span>&gt;</span>  无意义块状元素标签</span><br><span class="line"><span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> 无意义行内元素标签</span><br><span class="line"><span class="tag">&lt;<span class="name">p</span>&gt;</span><span class="tag">&lt;/<span class="name">p</span>&gt;</span> 段落标签</span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span>&gt;</span><span class="tag">&lt;/<span class="name">ul</span>&gt;</span> 无序列表</span><br><span class="line"><span class="tag">&lt;<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span> 超链接标签</span><br><span class="line"><span class="tag">&lt;<span class="name">img</span> /&gt;</span> 图片标签</span><br><span class="line"><span class="tag">&lt;<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span> 斜体标签</span><br><span class="line"><span class="tag">&lt;<span class="name">b</span>&gt;</span><span class="tag">&lt;/<span class="name">b</span>&gt;</span> 粗体标签</span><br></pre></td></tr></table></figure>
<h2 id="页面布局常用属性-一-：">页面布局常用属性(一)：</h2>
<ul>
<li>行高:            line-height</li>
<li>字体属性:	font-size</li>
<li>文本属性:    text-decoration、text-align</li>
<li>首行缩进:    text-indent</li>
<li>宽高属性:   width、height、min-height、max-height</li>
<li>背景属性:   background</li>
<li>列表属性:   list-style</li>
<li>字体颜色：color</li>
<li>filter：滤镜</li>
</ul>
<h2 id="页面布局常用选择器：">页面布局常用选择器：</h2>
<blockquote>
<p>能在不同的环境下快速定位到页面标签。</p>
<p>id + 属性 + 值</p>
</blockquote>
<ul>
<li>
<p><strong>id选择器 #id</strong></p>
</li>
<li>
<p><strong>类选择器 .class</strong></p>
</li>
<li>
<p><strong>关系选择器 div p (后代选择器)、 div&gt;p（子元素选择器）、 div.p</strong></p>
</li>
<li>
<p><strong>伪类选择器  hover</strong></p>
</li>
<li>
<p><strong>结构性伪类选择器：</strong></p>
<blockquote>
<p><strong>E: after 、E: before、E: nth-child()、E: first-child、E: last-child</strong></p>
</blockquote>
</li>
</ul>
<h2 id="复习之前学过的css选择器">复习之前学过的css选择器</h2>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-class">.box</span>        类名选择器</span><br><span class="line"><span class="selector-id">#box</span>        id选择器</span><br><span class="line"><span class="selector-tag">div</span> <span class="selector-tag">p</span>       后代选择器</span><br><span class="line"><span class="selector-tag">div</span><span class="selector-class">.box</span>     交集选择器</span><br><span class="line"><span class="selector-tag">div</span>,<span class="selector-tag">p</span>,<span class="selector-tag">span</span>  并集选择器 <span class="selector-attr">[就是定义多个标签使用同样的样式]</span></span><br><span class="line"><span class="selector-tag">div</span>&gt;<span class="selector-tag">p</span>       子代选择器 <span class="selector-attr">[定义div中的第一后代p标签]</span></span><br><span class="line"><span class="selector-tag">div</span>+<span class="selector-tag">p</span>   	相邻兄弟选择器 <span class="selector-attr">[选中div后面相邻p标签]</span></span><br><span class="line"><span class="selector-tag">div</span>~<span class="selector-tag">p</span>  		一般兄弟选择器<span class="selector-attr">[选中的div后面所有的p标签]</span></span><br><span class="line">*       	通配符</span><br><span class="line"></span><br><span class="line">/<span class="comment">/*&#123;&#125; 主要针对页面里的文字的格式</span></span><br></pre></td></tr></table></figure>
<h3 id="总结用法">总结用法</h3>
<p>1.属性选择器  []    通过标签属性来选择器</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*div 带有class属性  背景色变红 :*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class]</span>&#123;</span><br><span class="line">	<span class="attribute">background-color</span>: red;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*div 带有class属性 ，并且值为 box1 :*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class=<span class="string">&quot;box1&quot;</span>]</span>&#123;</span><br><span class="line">	<span class="attribute">background-color</span>: pink;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*div 带有class属性 ，并且值以 aa开头 [首字符]  :*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class^=<span class="string">&quot;aa&quot;</span>]</span>&#123;</span><br><span class="line">	 <span class="attribute">background-color</span>: green;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*div 带有class属性 ，并且值以 aa结尾 [结束字符] :*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class$=<span class="string">&quot;aa&quot;</span>]</span>&#123;</span><br><span class="line">	<span class="attribute">background-color</span>: orange;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="comment">/*div 带有class属性 ，并且值包含aa [所有包含aa]：*/</span></span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span><span class="selector-attr">[class*=<span class="string">&quot;aa&quot;</span>]</span>&#123;</span><br><span class="line"> 	<span class="attribute">background-color</span>: blue;</span><br><span class="line"> &#125;</span><br><span class="line">注意：在使用通配符时--写数字需要加 </span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="attribute">background-position</span>-x/y  给背景图片定位，通过+ —值按坐标轴移动：</span><br><span class="line"></span><br><span class="line"><span class="attribute">background-position</span>：-<span class="number">350px</span> -<span class="number">300px</span>;</span><br></pre></td></tr></table></figure>
<h2 id="伪类选择器">伪类选择器</h2>
<figure class="highlight"><table><tr><td class="code"><pre><span class="line"><span class="selector-tag">div</span> : empty &#123; &#125;   如果<span class="selector-tag">div</span>里面没有其他 dom 元素的话会被选中.</span><br><span class="line"></span><br><span class="line">&gt; <span class="selector-tag">h2</span><span class="selector-pseudo">:target</span>   伪类 要配合锚点使用，表示被激活的状态 :</span><br><span class="line"></span><br><span class="line">h2:target&#123;</span><br><span class="line">color:red</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">&lt;a href=&quot;#box&quot;&gt;</span><br><span class="line">&lt;h2 id=”box”&gt;</span><br></pre></td></tr></table></figure>
<h2 id="css3结构性伪类选择器">css3结构性伪类选择器</h2>
<blockquote>
<p><strong>选择器：root、not、empty、target</strong></p>
</blockquote>
<ul>
<li>
<p>: root 将样式绑定在页面的根元素中（根元素指位于文档中顶层的元素，在页面中整个HTML的部分）。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">// 将整页<span class="selector-tag">HTML</span>背景设置成蓝色</span><br><span class="line"></span><br><span class="line">: root &#123;  </span><br><span class="line">	background-color: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//在设置背景颜色中一般用</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">body</span>  &#123;</span><br><span class="line"></span><br><span class="line"><span class="attribute">background-color</span>: blue;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">//如果同时使用，<span class="selector-tag">body</span>只对内容区域设置背景颜色。</span><br></pre></td></tr></table></figure>
</li>
<li>
<p>: not  排除某个结构元素下面的子结构元素</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">//排除<span class="selector-tag">div</span>标签下的<span class="selector-tag">h1</span>元素</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">div</span> * <span class="selector-pseudo">:not</span> (<span class="selector-tag">h1</span>) &#123;     </span><br><span class="line"></span><br><span class="line">	<span class="attribute">color</span>: orange;		</span><br><span class="line">&#125;   </span><br></pre></td></tr></table></figure>
</li>
<li>
<p>: empty  指定当前内容为空白时使用的样式</p>
<blockquote>
<p>一般在表格中使用居多</p>
</blockquote>
</li>
<li>
<p>：target  对页面中某个target元素指定样式</p>
</li>
</ul>
<h2 id="伪类选择器–结构伪类">伪类选择器–结构伪类</h2>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="selector-pseudo">:first</span>-child      第一个</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:last-child</span>       最后一个</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(<span class="number">11</span>)    选择第<span class="number">11</span>个</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(odd)   奇数</span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(even)  偶数</span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n)    偶数</span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(<span class="number">2</span>n+<span class="number">1</span>)  奇数</span><br><span class="line"><span class="selector-pseudo">:nth-child</span>(-n+<span class="number">5</span>)       选中前五个(正序)</span><br><span class="line"><span class="selector-pseudo">:nth-last-child</span>(-n+<span class="number">5</span>)  选中后五个(倒序)   </span><br></pre></td></tr></table></figure>
<h3 id="UI-元素状态伪类选择器：">==UI 元素状态伪类选择器：==</h3>
<blockquote>
<p>指定的样式只有当元素处于某种状态下时才起作用，默认状态下不起作用。</p>
</blockquote>
<h5 id="在CSS3中，共有17种ui元素状态伪类选择器：">在CSS3中，共有17种ui元素状态伪类选择器：</h5>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">E: hover  鼠标经过改变状态(如背景颜色)</span><br><span class="line">E: active 鼠标选中不放开</span><br><span class="line">E: focus  焦点</span><br><span class="line">E: checked 单选扭勾选后样式</span><br><span class="line">E: disabled、</span><br><span class="line">E: red-only、E: default、E: indeterminate、</span><br><span class="line">E::selection、E: invalid、E: valid、E: required、</span><br><span class="line">E: optional、E: in-range、</span><br><span class="line">E: <span class="built_in">nth-child</span>()、E: first-child、E: last-child</span><br></pre></td></tr></table></figure>
<h2 id="伪元素选择器：">伪元素选择器：</h2>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">:before  元素首部添加效果</span><br><span class="line">:after   元素尾部添加效果</span><br><span class="line"></span><br><span class="line">通过css模拟出来html标签的效果  注意：必须有content属性才行.</span><br><span class="line"></span><br><span class="line">如：</span><br><span class="line">:before&#123;</span><br><span class="line">    content: <span class="string">&quot;--今天的风好大&quot;</span>;</span><br><span class="line">    <span class="attribute">font-size</span>: <span class="number">10px</span>;</span><br><span class="line">    <span class="attribute">color</span>: orange;</span><br><span class="line">&#125;   </span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:first</span>-letter  选中第一个字母(设置样式)</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">:first</span>-line    选中第一行(设置样式)</span><br></pre></td></tr></table></figure>
<h2 id="页面布局应用属性-：">页面布局应用属性 ：</h2>
<ul>
<li>定位属性：position</li>
<li>布局属性：display</li>
<li>浮动属性：float、clear</li>
<li>盒子模型：border、margin、padding</li>
<li>圆角边框：border-radius</li>
<li>阴影：        text-shadow、box-shadow</li>
</ul>
<h3 id="position定位：">position定位：</h3>
<p><strong>指定一个元素(静态的，相对的，绝对或固定)的定位方法的类型。</strong></p>
<h4 id="absolute：绝对定位">absolute：绝对定位</h4>
<p>以其他元素为参照物移动指定距离，绝对定位中被定位的元素不会占据原有物理空间。</p>
<blockquote>
<p>元素位置通过：left/right、top/bottom 属性进行规定。</p>
</blockquote>
<p><strong>相对于static定位以外的第一个父元素进行定位。</strong></p>
<blockquote>
<p>关于绝对定位的参考点：</p>
<ol>
<li>
<p>如果元素的外层元素有了除默认值外的定位设置（非static），那么这个外层元素就成为了该元素的参考点。</p>
<blockquote>
<p>static：默认值，没有定位。</p>
</blockquote>
</li>
<li>
<p>如果元素的外层元素没有设置任何position的值，那么该元素将寻找自己最近的其他设定过position的外层元素作为参照物（必须为嵌套层）。</p>
</li>
<li>
<p>如果该元素的外层元素没有任何一个元素使用position定位，那么此时定位参考元素变为body（或者说页面）。</p>
</li>
</ol>
</blockquote>
<h4 id="relative-相对定位-：">relative 相对定位 ：</h4>
<p>以当前元素为参照物移动指定距离，相对定位中被定位的元素会占据原有物理空间。</p>
<h4 id="fixed-固定定位">fixed  固定定位 :</h4>
<p>相对于浏览器窗口进行定位。</p>
<h4 id="z-index堆叠顺序：">z-index堆叠顺序：</h4>
<p>一旦改了元素的定位方式，元素可能会发生堆叠，可以用z-index来控制元素出现的重叠顺序。仅在定位元素上生效。z-index: 1（值越大堆叠顺序越高，离用户越近）。</p>
<h3 id="浮动属性：">浮动属性：</h3>
<ul>
<li>将元素排除在普通流之外</li>
<li>元素将不在页面占据空间</li>
<li>将浮动元素放置在包含框的左边或右边</li>
<li>浮动元素依旧位于包含框之内</li>
</ul>
<blockquote>
<p>浮动的框可以左右移动，直到他的外边缘碰到包含框或另一个浮动框的边框为止。</p>
</blockquote>
<ul>
<li>
<p>浮动元素的外边缘不会超过其父元素的内边框</p>
</li>
<li>
<p>浮动元素不会上下移动和相互层叠</p>
</li>
<li>
<p>任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行。</p>
<blockquote>
<p>语法： float:  none / left / right ;</p>
</blockquote>
</li>
</ul>
<h4 id="css-清除浮动：">css 清除浮动：</h4>
<blockquote>
<p>清除浮动是在使用了浮动之后必不可少的，为了网站的布局效果，清除浮动也变得非常麻烦</p>
</blockquote>
<blockquote>
<p>属性：clear   值：left、right、both ;</p>
</blockquote>
<h4 id="清除浮动的常用方式：">清除浮动的常用方式：</h4>
<ol>
<li>
<p>结尾处加空div标签 ： clear: both   (或在下一个元素上加 clear: both;)</p>
</li>
<li>
<p>浮动元素的父级div定义  overflow : hidden;</p>
</li>
<li>
<p>浮动元素的父级元素定义宽高。</p>
</li>
</ol>
<h3 id="布局属性：display">布局属性：display</h3>
<p>div–&gt;默认display属性为’ block ’ 块元素。</p>
<p>span–&gt;默认display属性为’  inline ’ 行内元素。</p>
<p>块元素和行内元素是可以转换的，我们可以通过display改变默认属性值。</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">display</span>常用属性值：</span><br><span class="line"></span><br><span class="line"><span class="attribute">none</span>：  隐藏元素（不占原有物理空间）</span><br><span class="line">inline：设置为行内元素</span><br><span class="line">block： 设置为块状元素</span><br><span class="line">inline-block： 设置为内联块（行内块状）元素，具有宽高属性，不会独占一行。</span><br><span class="line"><span class="selector-tag">table</span>-cell：指定对象作为表格单元格（合并，类似&lt;<span class="selector-tag">td</span>&gt; &lt;<span class="selector-tag">th</span>&gt;）</span><br><span class="line"></span><br><span class="line"><span class="attribute">flex</span>：弹性盒  (这是一个新的布局方式，你需要系统的去了解它)</span><br><span class="line"></span><br><span class="line">拓展： </span><br><span class="line"></span><br><span class="line"><span class="attribute">visibility</span> 设置元素是否隐藏（占据原有物理空间，和设置<span class="attribute">opacity</span>：<span class="number">0</span>;效果一致）</span><br><span class="line">hidden： 隐藏元素</span><br><span class="line">visible：显示元素</span><br><span class="line"></span><br><span class="line"><span class="attribute">opacity</span>：<span class="number">0.3</span>; 设置元素透明度</span><br><span class="line"></span><br><span class="line">溢出：</span><br><span class="line"><span class="attribute">overflow</span>:auto;  内容溢出后出现滚动条</span><br><span class="line"></span><br><span class="line"><span class="attribute">overflow-y</span>:      纵向溢出</span><br><span class="line">box-shadow: <span class="number">10px</span> <span class="number">10px</span> <span class="number">5px</span> pink;    盒子阴影</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="认识盒子模型-：">认识盒子模型 ：</h2>
<blockquote>
<p><strong>一个div标签就是一个盒子</strong>。</p>
</blockquote>
<h4 id="盒子里有-：-外边距-边框-内边距-自身宽高">盒子里有 ：  外边距  +  边框  +  内边距  + 自身宽高</h4>
<ol>
<li>
<p>margin： 外边距（设定当前div标签的边框与其他div直接的大小和距离）</p>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="comment">/*单边设置：*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">margin-top</span>/<span class="attribute">right</span>/<span class="attribute">bottom</span>/<span class="attribute">left</span>: value;</span><br><span class="line"></span><br><span class="line">value可取值为px,%,<span class="attribute">auto</span>,负值。</span><br><span class="line"></span><br><span class="line"><span class="comment">/*margin定义时使用顺时针（上、右、下、左）给定值。*/</span></span><br><span class="line"></span><br><span class="line">如：</span><br><span class="line"><span class="attribute">margin</span>: <span class="number">20px</span> <span class="number">20px</span> ; <span class="comment">/*上下左右各20像素*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">margin</span>: <span class="number">20px</span> <span class="number">10px</span> <span class="number">20px</span> ; <span class="comment">/*上20，左右10，下20*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">margin</span>: <span class="number">20px</span>; <span class="comment">/*上下左右20*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">margin</span>:auto;  <span class="comment">/*块状元素居中显示*/</span></span><br><span class="line"></span><br><span class="line"><span class="attribute">margin</span>:<span class="number">10px</span> auto;   <span class="comment">/*上下10px外边距，块状元素居中显示*/</span>  </span><br><span class="line"></span><br><span class="line">外边距上下合并问题：以最大的边距为主。只有上下合并，无左右。</span><br><span class="line"></span><br><span class="line">解决包含式（子元素设置外边距后父元素被合并）外边距合并问题：加<span class="number">1px</span>实线边框</span><br><span class="line"></span><br><span class="line">boeder: <span class="number">1px</span> solid blue;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li>
<p>border：  边框</p>
<blockquote>
<p>三要素：border：宽度 样式 颜色</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">统一写法：boeder: <span class="number">1px</span> solid blue;</span><br><span class="line"></span><br><span class="line">单独写法：</span><br><span class="line"></span><br><span class="line">boder-widht:; 不写默认<span class="number">3px</span></span><br><span class="line">boder-style:; style属性为空时，统一或单独写边框都不出现。</span><br><span class="line">boder-<span class="attribute">color</span>:; 不写默认黑色</span><br><span class="line"></span><br><span class="line"><span class="comment">/*dotted 点状 */</span></span><br><span class="line"><span class="comment">/*solid  实线 */</span></span><br><span class="line"><span class="comment">/*double 双实线（最低3px 不然显示不下） */</span></span><br><span class="line"><span class="comment">/*dashed 虚线 */</span></span><br><span class="line"><span class="comment">/*none   无边框 */</span></span><br><span class="line"></span><br><span class="line">boder-<span class="attribute">right</span>:<span class="number">1px</span> solid orange; 设置右侧边框： <span class="number">1px</span> 实线 橙色;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
</li>
<li>
<p>padding ： 内边距</p>
<blockquote>
<p>内容区域和边框之间，会扩大边框所占区域。</p>
<p>在设定了内边距和边框时，如果想要保持原有的宽高需减去设定的内外边距宽高  ：</p>
<p>原有宽和高-（内边距+边框）* 2</p>
</blockquote>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line"><span class="attribute">padding</span>:值（像素、百分比、不能为负数）;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*单边设置：*/</span></span><br><span class="line"><span class="attribute">padding-top</span>/<span class="attribute">right</span>/<span class="attribute">bottom</span>/<span class="attribute">left</span>: value;</span><br></pre></td></tr></table></figure>
</li>
<li>
<p>content： 内容（自身宽高）</p>
</li>
</ol>
<blockquote>
<p>盒子大小 =  外边距  +  边框  +  内边距  + 自身宽高</p>
</blockquote>
<h4 id="box-sizing-定义盒模型：">box-sizing 定义盒模型：</h4>
<p><strong>content-box (标准盒)</strong></p>
<blockquote>
<p>padding和border不被包含在width和hight中，元素实际大小为宽高+border+padding，标准模式下盒模型。</p>
</blockquote>
<p><strong>border-box(怪异盒)</strong></p>
<blockquote>
<p>padding和border被包含在width和hight中，元素实际定义的宽高不改变。</p>
</blockquote>
<h4 id="期末：">期末：</h4>
<blockquote>
<figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">body</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;header&quot;</span>&gt;</span>header<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">&quot;content&quot;</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;left&quot;</span>&gt;</span>left<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;main&quot;</span>&gt;</span>main<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;right&quot;</span>&gt;</span>right<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">&quot;footer&quot;</span>&gt;</span>footer<span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">body</span>&gt;</span></span><br></pre></td></tr></table></figure>
</blockquote>
<h4 id="css">css</h4>
<figure class="highlight css"><table><tr><td class="code"><pre><span class="line">&gt; <span class="selector-tag">body</span> &#123;</span><br><span class="line">&gt;     <span class="attribute">padding</span>: <span class="number">0</span>;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">0</span>;</span><br><span class="line">&gt;     <span class="attribute">text-align</span>: center;</span><br><span class="line">&gt;     <span class="attribute">background-image</span>: <span class="built_in">linear-gradient</span>(to right, <span class="number">#e0c3fc</span> <span class="number">0%</span>, <span class="number">#8ec5fc</span> <span class="number">100%</span>);</span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-class">.header</span>&#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">1200px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: deepskyblue;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&gt; </span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-id">#content</span>&#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">1200px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">450px</span>;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: <span class="number">#34e7e4</span>;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-class">.left</span>&#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">float</span>: left;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: <span class="number">#ff5e57</span>;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">35px</span>;</span><br><span class="line">&gt; </span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-class">.main</span>&#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">float</span>: left;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: <span class="number">#ffc048</span>;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">35px</span>;</span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-class">.right</span> &#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">300px</span>;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: <span class="number">#ef5777</span>;</span><br><span class="line">&gt;     <span class="attribute">float</span>: left;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">35px</span>;</span><br><span class="line">&gt; &#125;</span><br><span class="line">&gt; <span class="selector-class">.footer</span>&#123;</span><br><span class="line">&gt;     <span class="attribute">width</span>: <span class="number">1200px</span>;</span><br><span class="line">&gt;     <span class="attribute">height</span>: <span class="number">60px</span>;</span><br><span class="line">&gt;     <span class="attribute">background-color</span>: deepskyblue;</span><br><span class="line">&gt;     <span class="attribute">margin</span>: <span class="number">0</span> auto;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure></article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">文章作者: </span><span class="post-copyright-info"><a href="mailto:null">John Doe</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">文章链接: </span><span class="post-copyright-info"><a href="https://liaoyia.gitee.io/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/">https://liaoyia.gitee.io/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">版权声明: </span><span class="post-copyright-info">本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">CC BY-NC-SA 4.0</a> 许可协议。转载请注明来自 <a href="https://liaoyia.gitee.io" target="_blank">YoiaL</a>！</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/liaoyia/tags/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/">学习笔记</a><a class="post-meta__tags" href="/liaoyia/tags/%E8%8F%9C%E9%B8%9F%E5%85%A5%E9%97%A8/">菜鸟入门</a><a class="post-meta__tags" href="/liaoyia/tags/HTML-CSS/">HTML+CSS</a></div><div class="post_share"><div class="social-share" data-image="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><nav class="pagination-post" id="pagination"><div class="prev-post pull-left"><a href="/liaoyia/2020/06/26/MySQL%E5%9F%BA%E7%A1%80/"><img class="prev-cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymysql.jpg" onerror="onerror=null;src='/liaoyia/img/404.jpg'" alt="cover of previous post"><div class="pagination-info"><div class="label">上一篇</div><div class="prev_info">Mysql回顾</div></div></a></div><div class="next-post pull-right"><a href="/liaoyia/2020/04/29/MySQL%E8%A1%A8%E6%9F%A5%E8%AF%A2%E5%AE%9E%E8%AE%AD%E7%AC%94%E8%AE%B0/"><img class="next-cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymonvpng.png" onerror="onerror=null;src='/liaoyia/img/404.jpg'" alt="cover of next post"><div class="pagination-info"><div class="label">下一篇</div><div class="next_info">MySQL表查询实训</div></div></a></div></nav><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span> 相关推荐</span></div><div class="relatedPosts-list"><div><a href="/liaoyia/2020/06/26/MySQL基础/" title="Mysql回顾"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymysql.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-26</div><div class="title">Mysql回顾</div></div></a></div><div><a href="/liaoyia/2020/04/29/MySQL表查询实训笔记/" title="MySQL表查询实训"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymonvpng.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-29</div><div class="title">MySQL表查询实训</div></div></a></div><div><a href="/liaoyia/2020/04/09/MySQL数据更新/" title="MySQL数据更新和单表查询"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lysee.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-09</div><div class="title">MySQL数据更新和单表查询</div></div></a></div><div><a href="/liaoyia/2020/04/08/Markdown/" title="Markdown基本语法总结"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymd.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-08</div><div class="title">Markdown基本语法总结</div></div></a></div><div><a href="/liaoyia/2020/04/06/MySQL数据完整性约束/" title="MySQL数据完整性约束"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lysel.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-04-06</div><div class="title">MySQL数据完整性约束</div></div></a></div><div><a href="/liaoyia/2020/03/22/MySQL创建和管理数据库/" title="初探 MySQL"><img class="cover" src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymonvpng.png" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-03-22</div><div class="title">初探 MySQL</div></div></a></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="card-info-avatar is-center"><img class="avatar-img" src="/liaoyia/null" onerror="this.onerror=null;this.src='/liaoyia/img/friend_404.gif'" alt="avatar"/><div class="author-info__name">John Doe</div><div class="author-info__description"></div></div><div class="card-info-data"><div class="card-info-data-item is-center"><a href="/liaoyia/archives/"><div class="headline">文章</div><div class="length-num">16</div></a></div><div class="card-info-data-item is-center"><a href="/liaoyia/tags/"><div class="headline">标签</div><div class="length-num">9</div></a></div><div class="card-info-data-item is-center"><a href="/liaoyia/categories/"><div class="headline">分类</div><div class="length-num">6</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/liaoyio" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/liaoyia/2417276459" target="_blank" title="QQ"><i class="fas fa-qq"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>公告</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>目录</span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number">1.</span> <span class="toc-text">给你的网页加点颜色：</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BB%80%E4%B9%88%E6%98%AFCSS%EF%BC%9F"><span class="toc-number">1.1.</span> <span class="toc-text">什么是CSS？</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.2.</span> <span class="toc-text">认识选择器 :</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E6%A0%B7%E5%BC%8F%E8%A1%A8-%EF%BC%9A"><span class="toc-number">1.3.</span> <span class="toc-text">认识样式表 ：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#div-css-%E5%B8%83%E5%B1%80"><span class="toc-number">1.4.</span> <span class="toc-text">div + css 布局 :</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE"><span class="toc-number">1.4.1.</span> <span class="toc-text">页面常用标签</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7-%E4%B8%80-%EF%BC%9A"><span class="toc-number">1.5.</span> <span class="toc-text">页面布局常用属性(一)：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E5%B8%B8%E7%94%A8%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">1.6.</span> <span class="toc-text">页面布局常用选择器：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E4%B9%A0%E4%B9%8B%E5%89%8D%E5%AD%A6%E8%BF%87%E7%9A%84css%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.7.</span> <span class="toc-text">复习之前学过的css选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%80%BB%E7%BB%93%E7%94%A8%E6%B3%95"><span class="toc-number">1.7.1.</span> <span class="toc-text">总结用法</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.8.</span> <span class="toc-text">伪类选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css3%E7%BB%93%E6%9E%84%E6%80%A7%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">1.9.</span> <span class="toc-text">css3结构性伪类选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%E2%80%93%E7%BB%93%E6%9E%84%E4%BC%AA%E7%B1%BB"><span class="toc-number">1.10.</span> <span class="toc-text">伪类选择器–结构伪类</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#UI-%E5%85%83%E7%B4%A0%E7%8A%B6%E6%80%81%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">1.10.1.</span> <span class="toc-text">&#x3D;&#x3D;UI 元素状态伪类选择器：&#x3D;&#x3D;</span></a><ol class="toc-child"><li class="toc-item toc-level-5"><a class="toc-link" href="#%E5%9C%A8CSS3%E4%B8%AD%EF%BC%8C%E5%85%B1%E6%9C%8917%E7%A7%8Dui%E5%85%83%E7%B4%A0%E7%8A%B6%E6%80%81%E4%BC%AA%E7%B1%BB%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">1.10.1.0.1.</span> <span class="toc-text">在CSS3中，共有17种ui元素状态伪类选择器：</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BC%AA%E5%85%83%E7%B4%A0%E9%80%89%E6%8B%A9%E5%99%A8%EF%BC%9A"><span class="toc-number">1.11.</span> <span class="toc-text">伪元素选择器：</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%A1%B5%E9%9D%A2%E5%B8%83%E5%B1%80%E5%BA%94%E7%94%A8%E5%B1%9E%E6%80%A7-%EF%BC%9A"><span class="toc-number">1.12.</span> <span class="toc-text">页面布局应用属性 ：</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#position%E5%AE%9A%E4%BD%8D%EF%BC%9A"><span class="toc-number">1.12.1.</span> <span class="toc-text">position定位：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#absolute%EF%BC%9A%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.12.1.1.</span> <span class="toc-text">absolute：绝对定位</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#relative-%E7%9B%B8%E5%AF%B9%E5%AE%9A%E4%BD%8D-%EF%BC%9A"><span class="toc-number">1.12.1.2.</span> <span class="toc-text">relative 相对定位 ：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#fixed-%E5%9B%BA%E5%AE%9A%E5%AE%9A%E4%BD%8D"><span class="toc-number">1.12.1.3.</span> <span class="toc-text">fixed  固定定位 :</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#z-index%E5%A0%86%E5%8F%A0%E9%A1%BA%E5%BA%8F%EF%BC%9A"><span class="toc-number">1.12.1.4.</span> <span class="toc-text">z-index堆叠顺序：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%B5%AE%E5%8A%A8%E5%B1%9E%E6%80%A7%EF%BC%9A"><span class="toc-number">1.12.2.</span> <span class="toc-text">浮动属性：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#css-%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%EF%BC%9A"><span class="toc-number">1.12.2.1.</span> <span class="toc-text">css 清除浮动：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8%E7%9A%84%E5%B8%B8%E7%94%A8%E6%96%B9%E5%BC%8F%EF%BC%9A"><span class="toc-number">1.12.2.2.</span> <span class="toc-text">清除浮动的常用方式：</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%B8%83%E5%B1%80%E5%B1%9E%E6%80%A7%EF%BC%9Adisplay"><span class="toc-number">1.12.3.</span> <span class="toc-text">布局属性：display</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%AE%A4%E8%AF%86%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B-%EF%BC%9A"><span class="toc-number">1.13.</span> <span class="toc-text">认识盒子模型 ：</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E7%9B%92%E5%AD%90%E9%87%8C%E6%9C%89-%EF%BC%9A-%E5%A4%96%E8%BE%B9%E8%B7%9D-%E8%BE%B9%E6%A1%86-%E5%86%85%E8%BE%B9%E8%B7%9D-%E8%87%AA%E8%BA%AB%E5%AE%BD%E9%AB%98"><span class="toc-number">1.13.0.1.</span> <span class="toc-text">盒子里有 ：  外边距  +  边框  +  内边距  + 自身宽高</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#box-sizing-%E5%AE%9A%E4%B9%89%E7%9B%92%E6%A8%A1%E5%9E%8B%EF%BC%9A"><span class="toc-number">1.13.0.2.</span> <span class="toc-text">box-sizing 定义盒模型：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%9C%9F%E6%9C%AB%EF%BC%9A"><span class="toc-number">1.13.0.3.</span> <span class="toc-text">期末：</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#css"><span class="toc-number">1.13.0.4.</span> <span class="toc-text">css</span></a></li></ol></li></ol></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/liaoyia/2020/11/12/hello-world/" title="Hello World"><img src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/img/default.jpg" onerror="this.onerror=null;this.src='/liaoyia/img/404.jpg'" alt="Hello World"/></a><div class="content"><a class="title" href="/liaoyia/2020/11/12/hello-world/" title="Hello World">Hello World</a><time datetime="2020-11-12T05:23:35.000Z" title="发表于 2020-11-12 13:23:35">2020-11-12</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/liaoyia/2020/06/26/MySQL%E5%9F%BA%E7%A1%80/" title="Mysql回顾"><img src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymysql.jpg" onerror="this.onerror=null;this.src='/liaoyia/img/404.jpg'" alt="Mysql回顾"/></a><div class="content"><a class="title" href="/liaoyia/2020/06/26/MySQL%E5%9F%BA%E7%A1%80/" title="Mysql回顾">Mysql回顾</a><time datetime="2020-06-26T12:34:53.000Z" title="发表于 2020-06-26 20:34:53">2020-06-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/liaoyia/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/" title="Css层叠样式表期末复习"><img src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png" onerror="this.onerror=null;this.src='/liaoyia/img/404.jpg'" alt="Css层叠样式表期末复习"/></a><div class="content"><a class="title" href="/liaoyia/2020/06/22/css%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8/" title="Css层叠样式表期末复习">Css层叠样式表期末复习</a><time datetime="2020-06-22T11:08:56.000Z" title="发表于 2020-06-22 19:08:56">2020-06-22</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/liaoyia/2020/04/29/MySQL%E8%A1%A8%E6%9F%A5%E8%AF%A2%E5%AE%9E%E8%AE%AD%E7%AC%94%E8%AE%B0/" title="MySQL表查询实训"><img src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lymonvpng.png" onerror="this.onerror=null;this.src='/liaoyia/img/404.jpg'" alt="MySQL表查询实训"/></a><div class="content"><a class="title" href="/liaoyia/2020/04/29/MySQL%E8%A1%A8%E6%9F%A5%E8%AF%A2%E5%AE%9E%E8%AE%AD%E7%AC%94%E8%AE%B0/" title="MySQL表查询实训">MySQL表查询实训</a><time datetime="2020-04-29T08:21:56.000Z" title="发表于 2020-04-29 16:21:56">2020-04-29</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/liaoyia/2020/04/09/MySQL%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0/" title="MySQL数据更新和单表查询"><img src="https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lysee.png" onerror="this.onerror=null;this.src='/liaoyia/img/404.jpg'" alt="MySQL数据更新和单表查询"/></a><div class="content"><a class="title" href="/liaoyia/2020/04/09/MySQL%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0/" title="MySQL数据更新和单表查询">MySQL数据更新和单表查询</a><time datetime="2020-04-09T08:08:56.000Z" title="发表于 2020-04-09 16:08:56">2020-04-09</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://cdn.jsdelivr.net/gh/liaoyio/imgHosting/img-lyHTML.png')"><div id="footer-wrap"><div class="copyright">&copy;2018 - 2021 <i style="color:#FF6A6A" class="fa fa-heartbeat"></i> John Doe</div><div class="footer_custom_text">Hi, welcome to my <a target="_blank" rel="noopener" href="https://liaoyi.xyz/">blog</a>!</div></div><div class="container" id="jsi-flying-fish-container"></div><script src="js/fish.js"></script><style>@media only screen and (max-width: 767px){
#sidebar_search_box input[type=text]{width:calc(100% - 24px)}
}</style></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="阅读模式"><i class="fas fa-book-open"></i></button><button id="translateLink" type="button" title="简繁转换">繁</button><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="目录"><i class="fas fa-list-ul"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><div class="search-dialog__title" id="local-search-title">本地搜索</div><div id="local-input-panel"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div></div><hr/><div id="local-search-results"></div><span class="search-close-button"><i class="fas fa-times"></i></span></div><div id="search-mask"></div></div><div><script src="/liaoyia/js/utils.js"></script><script src="/liaoyia/js/main.js"></script><script src="/liaoyia/js/tw_cn.js"></script><script src="https://cdn.jsdelivr.net/npm/node-snackbar/dist/snackbar.min.js"></script><script>function panguFn () {
  if (typeof pangu === 'object') pangu.autoSpacingPage()
  else {
    getScript('https://cdn.jsdelivr.net/npm/pangu/dist/browser/pangu.min.js')
      .then(() => {
        pangu.autoSpacingPage()
      })
  }
}

function panguInit () {
  if (false){
    GLOBAL_CONFIG_SITE.isPost && panguFn()
  } else {
    panguFn()
  }
}

document.addEventListener('DOMContentLoaded', panguInit)</script><script src="/liaoyia/js/search/local-search.js"></script><div class="js-pjax"></div><script src="https://cdn.jsdelivr.net/gh/sviptzk/HexoStaticFile@latest/Hexo/js/mouse_snow.min.js"></script><script src="js/jquery.min.js"></script><script src="/js/fish.js"></script><div class="aplayer no -destroy" data-id="000PeZCQ1i4XVs" data-server="tencent" data-type="artist" data-fixed="true" data-mini=" true" data-listFolded="false" data-order="random" data-preload="none" data-autoplay="true" muted></div><script src="/js/fishes.js"></script><script id="click-heart" src="https://cdn.jsdelivr.net/npm/butterfly-extsrc@1/dist/click-heart.min.js" async="async" mobile="true"></script><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/gh/metowolf/MetingJS@1.2/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>